﻿@page "/linear-gauge/export"

@using Syncfusion.Blazor.LinearGauge
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Inputs
@using Syncfusion.Blazor.Buttons

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates the print and export functionality of linear gauge.</p>
</SampleDescription>
<ActionDescription>
   <p>In this example, you can see how to export and print the rendered linear gauge. The Linear Gauge can be exported to JPEG, PNG, SVG, and PDF formats. Print functionality is done by <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.LinearGauge.SfLinearGauge.html#Syncfusion_Blazor_LinearGauge_SfLinearGauge_Print_System_Object_'>
      Print</a></code> method when <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.LinearGauge.SfLinearGauge.html#Syncfusion_Blazor_LinearGauge_SfLinearGauge_AllowPrint'>AllowPrint</a></code> is set as true. Export functionality is done by <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.LinearGauge.SfLinearGauge.html#Syncfusion_Blazor_LinearGauge_SfLinearGauge_Export_Syncfusion_Blazor_LinearGauge_ExportType_System_String_System_Object_System_Nullable_System_Boolean__'>Export</a></code> 
      method when <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.LinearGauge.SfLinearGauge.html#Syncfusion_Blazor_LinearGauge_SfLinearGauge_AllowImageExport'>AllowImageExport</a></code> and 
      <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.LinearGauge.SfLinearGauge.html#Syncfusion_Blazor_LinearGauge_SfLinearGauge_AllowPdfExport'>AllowPdfExport</a></code> is set as true.</p>
  <br> <p>More information about linear gauge can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/linear-gauge/print'>documentation section</a>.</p>
</ActionDescription>

<div class="col-lg-9 control-section sb-property-border">
    <SfLinearGauge @ref="@Gauge" Orientation="Orientation.Horizontal" Title="Speedometer" AllowPdfExport="true" AllowPrint="true" AllowImageExport="true">
        <LinearGaugeAxes>
            <LinearGaugeAxis Minimum="0" Maximum="120">
                <LinearGaugeLine Width="0"/>
                <LinearGaugeMajorTicks Height="0" Width="0" Interval="20"/>
                <LinearGaugeMinorTicks Height="7" Width="0" Interval="4"/>
                <LinearGaugeAxisLabelStyle Offset="4" Position="Position.Outside"/>
                <LinearGaugeRanges>
                    <LinearGaugeRange Start="0" End="20" StartWidth="15" EndWidth="25" Color="#82b944"/>
                    <LinearGaugeRange Start="20" End="40" StartWidth="25" EndWidth="35" Color="#a1cb43"/>
                    <LinearGaugeRange Start="40" End="60" StartWidth="35" EndWidth="45" Color="#ddec12"/>
                    <LinearGaugeRange Start="60" End="80" StartWidth="45" EndWidth="55" Color="#ffbc00"/>
                    <LinearGaugeRange Start="80" End="100" StartWidth="55" EndWidth="65" Color="#ff6000"/>
                    <LinearGaugeRange Start="100" End="120" StartWidth="65" EndWidth="75" Color="red"/>
                </LinearGaugeRanges>
                <LinearGaugePointers>
                    <LinearGaugePointer Value="80" Height="23" Width="35" Offset="-55" MarkerType="MarkerType.Triangle">
                        <LinearGaugePointerBorder Width="2" Color="white"/>
                    </LinearGaugePointer>
                </LinearGaugePointers>
            </LinearGaugeAxis>
        </LinearGaugeAxes>
    </SfLinearGauge>
</div>
<div class="col-lg-3 property-section">
    <div class="property-panel-section">
        <div class="property-panel-header">Properties</div>
        <div class="property-panel-content">
            <table style="width: 120%">
                <tbody>
                    <tr>
                        <td>
                            <div class="property-text">Export Type</div>
                        </td>
                        <td>
                            <div style="margin-left: -10px">
                                <SfDropDownList TValue="string" TItem="FileTypeList" DataSource="@FileTypes" @bind-Value="@FileType" Width="65%">
                                    <DropDownListEvents TValue="string" TItem="FileTypeList" ValueChange="ValueChange"/>
                                    <DropDownListFieldSettings Text="Name" Value="Name"/>
                                </SfDropDownList>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="property-text">File Name</div>
                        </td>
                        <td>
                            <div class="e-float-input" style="margin-top: 0px;  margin-left: -10px;width:70%">
                                <SfTextBox Value="@FileName" ValueChange="@nameChange" Placeholder="Linear Gauge"/>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td style="padding-left: 7%;">
                            <SfButton OnClick="ExportClick" CssClass="e-info" IsToggle="true" IsPrimary="true">Export</SfButton>
                        </td>
                        <td>
                            <SfButton OnClick="PrintClick" CssClass="e-info" IsToggle="true" IsPrimary="true">Print</SfButton>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<style>
    tr {
       height: 50px;
    }
    td {
        width: 50%;
    }
</style> 
@code {
    SfLinearGauge Gauge;
    private string FileType { get; set; } = "JPEG";
    private string FileName { get; set; } = "Linear Gauge";
    public class FileTypeList
    {
        public string Name { get; set; }
    }
    private List<FileTypeList> FileTypes = new List<FileTypeList> {
        new FileTypeList { Name="JPEG" },
        new FileTypeList { Name="PNG" },
        new FileTypeList { Name="SVG" },
        new FileTypeList { Name="PDF" }
    };
    private void ValueChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, FileTypeList> args) {
        FileType = args.Value;
    }
    private void nameChange(Syncfusion.Blazor.Inputs.ChangedEventArgs args) {
        FileName = args.Value;
    }
    private async Task PrintClick() {
        await this.Gauge.PrintAsync();
    }
    private async Task ExportClick() {
        ExportType ExportFileType = ExportType.JPEG;
        switch (FileType) {
            case "JPEG":
                ExportFileType = ExportType.JPEG;
                break;
            case "PNG":
                ExportFileType = ExportType.PNG;
                break;
            case "SVG":
                ExportFileType = ExportType.SVG;
                break;
            case "PDF":
                ExportFileType = ExportType.PDF;
                break;
        }
        await this.Gauge.ExportAsync(ExportFileType, FileName);
    }
}